<script setup lang="ts">
import { get_ShiYEle } from '@/request';
import * as echarts from 'echarts';
import moment from 'moment';
import { onMounted, ref } from 'vue';
const RefBox = ref(null)
var option = {
    color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    grid: {
        left: '3%',
        height: '200',
        bottom: '3%',
        top: '10%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: [],
             axisLabel:{
                color:'#eee'
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            axisLabel:{
                color:'#eee'
            }
        }
    ],
    series: [
        {
            name: 'Line 1',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
                width: 3,
                color: 'red'
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: '#FF0040'
                    },
                    {
                        offset: 1,
                        color: '#00006A'
                    }
                ])
            },
            emphasis: {
                focus: 'series'
            },
            data: [140, 232, 101, 264, 90, 340, 250]
        },

    ]
};
onMounted(() => {
    const myChart = echarts.init(RefBox.value);
    get_ShiYEle().then(resp => {
        console.log('实时用电', resp.data.data)
        option.series[0].data = resp.data.data.map(item => item.value);
        myChart.setOption(option);
    })
    let xData=[]
    let time=+new Date()
    for(let i = 0;i<14;i++){
        xData.unshift(moment(time).format('mm:ss'))
        time-=120*1000
    }
    option.xAxis[0].data = xData
    window.addEventListener('resize', () => {
        myChart.resize();
    });
});
</script>

<template>
    <div ref="RefBox" class="Ele">

    </div>
</template>

<style scoped lang="scss">
.Ele {
    width: 100%;
    height: 30vh;
    // border: #fcc solid 1px;
}
</style>
